<template>
    <n-modal v-model:show="show">
        <div class="a-form-modal-page">
            <div class="title">{{ formData.id ? "编辑" : "新增" }}</div>
            <div class="close" @click="onClose">
                <CloseOutlined />
            </div>
            <n-form
                :model="formData"
                label-placement="left"
                :label-width="labelWidth || undefined"
                :rules="rules"
                ref="formRef"
            >
                <n-form-item
                    v-for="(item, index) in formList"
                    :key="index"
                    :label="item.label"
                    :path="item.key"
                >
                    <n-input
                        v-if="item.type === 'input'"
                        :placeholder="item.placeholder || undefined"
                        v-model:value="formData[item.key]"
                        :clearable="item.clear || false"
                    />
                    <n-input
                        v-if="item.type === 'textarea'"
                        type="textarea"
                        :placeholder="item.placeholder || undefined"
                        v-model:value="formData[item.key]"
                        :clearable="item.clear || false"
                    />
                    <n-input-number
                        v-if="item.type === 'input-number'"
                        :placeholder="item.placeholder || undefined"
                        v-model:value="formData[item.key]"
                        :clearable="item.clear || false"
                    />
                    <n-select
                        v-if="item.type === 'select'"
                        :options="item.options"
                        :placeholder="item.placeholder || undefined"
                        v-model:value="formData[item.key]"
                        :clearable="item.clear || false"
                    />
                    <n-date-picker
                        v-if="item.type === 'date-picker'"
                        v-model:value="formData[item.key]"
                        type="date"
                        :clearable="item.clear || false"
                    />
                    <n-radio-group
                        v-model:value="formData[item.key]"
                        v-if="item.type === 'radio'"
                    >
                        <n-space>
                            <n-radio
                                v-for="_item in item.options"
                                :key="_item.value"
                                :value="_item.value"
                            >
                                {{ _item.label }}
                            </n-radio>
                        </n-space>
                    </n-radio-group>
                    <n-checkbox-group
                        v-model:value="formData[item.key]"
                        v-if="item.type === 'checkbox'"
                    >
                        <n-space item-style="display: flex;">
                            <n-checkbox
                                v-for="(_item, _index) in item.options"
                                :key="_index"
                                :value="_item.value"
                                :label="_item.label"
                            />
                        </n-space>
                    </n-checkbox-group>
                    <n-tooltip trigger="hover" v-if="item.tip">
                        <template #trigger>
                            <div class="tip">
                                <ExclamationCircleOutlined />
                            </div>
                        </template>
                        {{ item.tip }}
                    </n-tooltip>
                </n-form-item>
                <n-form-item label=" " class="btn-label">
                    <n-button type="primary" @click="onSubmit">提交</n-button>
                </n-form-item>
            </n-form>
        </div>
    </n-modal>
</template>
<script>
import { ref, computed } from "vue";
import {
    CloseOutlined,
    ExclamationCircleOutlined,
} from "@ant-design/icons-vue";

export default {
    components: {
        CloseOutlined,
        ExclamationCircleOutlined,
    },
    props: {
        //展示弹框
        show: {
            type: Boolean,
            defalut: () => false,
        },
        //表单项
        formList: {
            type: Array,
            defalut: () => [],
        },
        //表单数据
        formData: {
            type: Object,
            defalut: () => {},
        },
        //表单校验规则
        rules: {
            type: Object,
            defalut: () => {},
        },
        //label宽度
        labelWidth: {
            type: Number,
            defalut: () => null,
        },
        //新增方法
        addMethod: {
            type: String,
            defalut: () => undefined,
        },
        //更新方法
        updataMethod: {
            type: String,
            defalut: () => undefined,
        },
        //是否自动提交
        autoSave: {
            type: Boolean,
            defalut: () => false,
        },
    },
    setup(props) {
        const show = computed({
            get: () => props.show,
        });
        const formList = computed({
            get: () => props.formList,
        });
        const formData = computed({
            get: () => props.formData,
        });
        const rules = computed({
            get: () => props.rules,
        });
        const labelWidth = computed({
            get: () => props.labelWidth,
        });
        const addMethod = computed({
            get: () => props.addMethod,
        });
        const updataMethod = computed({
            get: () => props.updataMethod,
        });
        const autoSave = computed({
            get: () => props.autoSave,
        });
        return {
            show,
            formList,
            formData,
            rules,
            labelWidth,
            formLoading: ref(false),
            addMethod,
            updataMethod,
            autoSave,
        };
    },
    methods: {
        //关闭按钮
        onClose() {
            this.$emit("close");
        },

        //提交按钮
        onSubmit() {
            this.$refs.formRef.validate((errors) => {
                if (!errors) this.onSave();
            });
        },

        //提交保存
        async onSave() {
            const { addMethod, updataMethod, autoSave, formData } = this;
            if (!autoSave) {
                this.$emit("save", formData);
                return;
            }
            let res;
            this.loading = true;
            if (formData.id) {
                res = await this.$api[updataMethod](formData);
            } else {
                res = await this.$api[addMethod](formData);
            }
            if (res?.code === 200) {
                window.$message.success("保存成功");
                this.$emit("saveSuccess");
            }
        },
    },
};
</script>
<style lang="less">
@import "@/styles/theme.less";

@color: var(--text-color);

.a-form-modal-page {
    min-width: 600px;
    min-height: 300px;
    background-color: var(--color);
    padding: 15px 30px 10px;
    border-radius: @border-radius;
    position: relative;
    box-sizing: border-box;
    &::after {
        position: absolute;
        content: "";
        display: block;
        height: 4px;
        width: 100%;
        left: 0;
        top: 0;
        background-color: var(--primary-color);
    }
    .close {
        position: absolute;
        right: 15px;
        top: 10px;
        font-size: 16px;
        cursor: pointer;
        opacity: 0.8;
        transition: all 0.25s ease-in-out;
        transform: scale(1);
        &:hover {
            opacity: 1;
            transform: scale(1.05);
        }
    }
    .title {
        font-size: 18px;
        letter-spacing: 4px;
        position: relative;
        line-height: 44px;
        margin-bottom: 30px;
        &::after {
            content: "";
            display: block;
            position: absolute;
            height: 1px;
            width: 100%;
            bottom: 0;
            left: 0;
            background-color: @color;
            transform: scaleY(0.15);
        }
    }
    .n-form-item-label {
        white-space: pre-wrap !important;
        letter-spacing: 3px;
        position: relative;
        padding-right: 15px;
        // margin-right: 10px;
        .n-form-item-label__asterisk {
            position: absolute;
            right: 0px;
        }
        &:not(.btn-label):after {
            content: ":";
            position: absolute;
            display: block;
            right: 8px;
            top: 0;
        }
    }
    .btn-label {
        .n-form-item-label:after {
            display: none;
        }
    }
    .n-form-item {
        .tip {
            font-size: 18px;
            margin-left: 10px;
            cursor: pointer;
            opacity: 0.8;
        }
    }
}
</style>
